<template>
  <div class="header-wrap">
    <div class="header wrapper">
      <a href="" class="logo">
        <img src="../../../assets/statics/img/logo3.png" alt="" />
      </a>
      <div class="header-schbox">
        <div class="inner clearfix">
            <div class="search-switch">
              <i class="arrow"></i>
              <div class="item">商品</div>
            </div>
            <input v-model="query.commodityName" class="search-txt" placeholder="搜流行宝贝">
            <button @click="searchGood" class="search-btn"></button>
            <div class="suggest-box">
              <div class="item" data-title="上衣 短款 短袖">上衣 短款 短袖<div class="tags"><span>雪纺</span><span>蕾丝</span><span>一字领</span></div></div>
            </div>
        </div>
        <div class="hot-words">
          <a href="">手机 </a><a href="">内衣</a><a href="">周大福</a><a href="">太平鸟</a>
        </div>
      </div>
      <div class="contact">
        <div class="item">
          <span class="ico iconfont">&#xe61b;</span>
          <span class="tel">400-000-0000</span>
        </div>
        <div class="item">
          <span class="ico iconfont">&#xe61d;</span><a class="kefu">在线客服</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default{
  name: 'IndexHeader',
  props: {
    query: {
      type: Object,
      default: () => {
        return {
          commodityName: null,
          brandId: null,
          categoryId: null
        }
      }
    }
  },
  data () {
    return {
    }
  },
  methods: {
    searchGood () {
      this.$router.push({path: '/searchGood', query: { commodityName: this.query.commodityName, brandId: this.query.brandId, categoryId: this.query.categoryId }})
      this.$router.go(0)
    }
  }
}
</script>
<style>

</style>
